<template>
    <div class="user_add_container">
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="用户名" prop="userId">
                <el-input type="text" v-model="ruleForm.userId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="text" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="ruleForm.sex" placeholder="请选择">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model.number="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="imageUrl">
                <el-upload class="upload-demo" action="/api/user/imageUpload" :on-exceed="handleExceed"
                    :on-remove="handleRemove" :file-list="fileList" list-type="picture" :limit="1"
                    :headers="{ 'Authorization': token }" :on-success="handleSuccess" :before-upload="beforeAvatarUpload">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input type="text" v-model="ruleForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-radio-group v-model="ruleForm.roleId">
                    <el-radio v-for="item in roleList" :key="item.roleId" :label="item.rolename"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="电话" prop="phoneNumber">
                <el-input type="text" v-model="ruleForm.phoneNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门">
                <el-radio-group v-model="ruleForm.departId">
                    <el-radio v-for="item in departList" :key="item.departId" :label="item.departName"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)">确定</el-button>
                <el-button @click="cancer">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { addOrUpdate } from '@/api/api'

export default {
  data () {
    return {
      ruleForm: {
        userId: '',
        password: '',
        sex: '',
        age: '',
        imageUrl: '',
        email: '',
        name: '',
        roleId: 1,
        phoneNumber: '',
        departId: 1
      },
      departList: [],
      roleList: [],
      fileList: [],
      token: this.$store.state.token
    }
  },
  methods: {
    submitForm (formName) {
      const params = {
        userId: formName.userId,
        password: formName.password,
        sex: formName.sex,
        age: formName.age,
        imageUrl: formName.imageUrl,
        email: formName.email,
        name: formName.name,
        roleId: formName.roleId,
        phoneNumber: formName.phoneNumber,
        departId: formName.departId
      }

      addOrUpdate(params).then(res => {
        // console.log(res.data)
        if (res.data.code === 200) {
          this.$router.back()
          this.$message('添加成功')
        } else {
          this.$message.warning('添加失败！请重试')
        }
      })
    },
    cancer () {
      this.$router.back()
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList)
      this.fileList = []
      this.ruleForm.imageUrl = ''
      // console.log(this.fileList, this.ruleForm.imageUrl)
    },
    handleExceed () {
      this.$message.warning('只能上传一张图片')
    },
    handleSuccess (res, file, fileList) {
      this.ruleForm.imageUrl = 'http://localhost:9999/view/' + file.name
      // console.log(this.ruleForm.imageUrl, fileList)
    },
    beforeAvatarUpload (file) {
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isPNG) {
        this.$message.warning('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.warning('上传头像图片大小不能超过 2MB!')
      }
      return isPNG && isLt2M
    }
  }
}

</script>

<style lang="scss" scoped>
.user_add_container {
    width: 50%;
    margin-left: 25%;
}

.el-form-item__label {
    margin-bottom: 10px;
}
</style>
